<!doctype html>
<html ng-app="myApp">
<head>
  <title>JS Animation</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"></script>
  <script src="http://code.angularjs.org/1.2.0-rc.2/angular-animate.js"></script>
  <script src="http://code.angularjs.org/1.2.0-rc.2/angular-route.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <style>
    .fadein.ng-enter {
      opacity: 0;
      color: green;
    }
    .fadein.ng-enter.ng-enter-active {
      opacity: 1;
      color: black;
    }
    .fadein.ng-leave {}
    .fadein.ng-leave.ng-leave-active {
      opacity: 0;
    }
  </style>
</head>
<body>

  <a href="#/">Home</a>
  <a href="#/two">Second view</a>
  <a href="#/three">Third view</a>
  <div class="animateView" ng-view></div>

  <script>
    angular.module('myApp', ['ngAnimate', 'ngRoute'])
    .config(function($routeProvider) {
      $routeProvider.when('/', {
        template: '<h2>One</h2>'
      }).when('/two', {
        template: '<h2>Two</h2>'
      }).when('/three', {
        template: '<h2>Three</h2>'
      });
    })

    .animation('.animateView', function() {
      return {
        enter: function(element, done) {
          // Example to show how to animate
          // with jQuery. Note, this requires
          // jQuery to be included in the HTML
          $(element).css({
            opacity: 0
          });
          $(element).animate({
            opacity: 1
          }, done);
        },
        leave: function(element, done) {
          done();
        }
      }
    });
  </script>

</body>
</html>